$margin: 30px;
$arrowSize: 60px;

.container {
    position: fixed;
    left: 0;
    top: $margin;
    bottom: $margin;
    z-index: 2;
    width: 260px;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0 5px 5px 0;
    @extend %transition;
    box-shadow: 0 0 8px 0 #666;

    &.hide {
        transform: translateX(-100%);
    }

    &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 10px;
        height: 2 * $arrowSize;
        display: block;
        content: '';
        transform: translateY(-50%);
        background-color: #fff;
    }
}

.content-list {
    position: relative;
}

.arrow {
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0.5 * $arrowSize;
    height: $arrowSize;
    border-radius: 0 $arrowSize $arrowSize 0;
    transform: translateY(-50%);
    background-color: #fff;
    cursor: pointer;
    box-shadow: 0 0 8px 0 #666;
}

.arrow-ico {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.4 * $arrowSize;
    height: 0.4 * $arrowSize;
    transform: translate(-60%, -50%);
    background: center/cover no-repeat;

    &.close {
        transform: translate(-75%, -50%) rotate(0.5turn);
    }
}
